<template>
	<el-form ref="formRef" :model="formData" label-width="150px" v-loading="loading">
		<el-form-item label="AccessKey：" prop="accessKey">
			<div class="w-80">
				<el-input v-model.trim="formData.accessKey" placeholder="请输入AccessKey" />
			</div>
		</el-form-item>
		<el-form-item label="SecretKey：" prop="secretKey">
			<div class="w-80">
				<el-input v-model.trim="formData.secretKey" placeholder="请输入SecretKey" />
			</div>
		</el-form-item>
		<el-form-item label="空间域名 Domain：" prop="domain">
			<div class="w-80">
				<el-input v-model.trim="formData.domain" placeholder="请输入空间域名Domain" />
			</div>
		</el-form-item>
		<el-form-item label="存储空间 Bucket：" prop="bucket">
			<div class="w-80">
				<el-input v-model.trim="formData.bucket" placeholder="请输入存储空间Bucket" />
			</div>
		</el-form-item>
		<el-form-item label="地域 Region：" prop="region">
			<div class="w-80">
				<el-input v-model.trim="formData.region" placeholder="请输入地域Region" />
			</div>
		</el-form-item>
        <el-form-item label="状态：">
			<el-radio-group v-model="formData.status">
				<el-radio :label="1">开启</el-radio>
				<el-radio :label="0">关闭</el-radio>
			</el-radio-group>
		</el-form-item>
	</el-form>
	<footerSubmit>
		<el-button v-auth="'setting/storage/edit'" type="primary" @click="handleSubmit">保存</el-button>
	</footerSubmit>
</template>

<script lang="ts" setup name="storageQcloudEdit">
import { ref, reactive, onMounted } from 'vue';
import { storageDetail, storageEdit } from '/@/api/setting/storage';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

const identify = 'qcloud';

// 表单数据
const formData = reactive({
	identify: identify,
	accessKey: '',
	secretKey: '',
	domain: '', //空间域名
	bucket: '', //存储空间
	region: '', //地域
    status: 1
});

// 获取数据
const getData = async () => {
	const res = await storageDetail({ identify: identify });
	const data = res?.params;

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
    loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await storageEdit(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
